﻿
@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<blockquote class="layui-elem-quote">所有监听数据请打开控制台查看</blockquote>

<button class="layui-btn layui-btn-primary up-all">全部收起</button>
<button class="layui-btn layui-btn-primary down-all">全部展开</button>
<button class="layui-btn layui-btn-primary get-checked">获取选中</button>

<table class="layui-table layui-form" id="test-tree-table"></table>
<script type="text/javascript">
    layui.config({
        base: '/js/',
    })
    layui.use(['treetable', 'form'], function () {
        var data = [{ "id": 1, "pid": 0, "title": "1-1" }, { "id": 2, "pid": 0, "title": "1-2" }, { "id": 3, "pid": 0, "title": "1-3" }, { "id": 4, "pid": 1, "title": "1-1-1" }, { "id": 5, "pid": 1, "title": "1-1-2" }, { "id": 6, "pid": 2, "title": "1-2-1" }, { "id": 7, "pid": 2, "title": "1-2-3" }, { "id": 8, "pid": 3, "title": "1-3-1" }, { "id": 9, "pid": 3, "title": "1-3-2" }, { "id": 10, "pid": 4, "title": "1-1-1-1" }, { "id": 11, "pid": 4, "title": "1-1-1-2" }];
        var o = layui.$, treetable = layui.treetable;
        var form = layui.form, layer = layui.layer;
        treetable.render({
            elem: '#test-tree-table',
            data: data,
            field: 'title',
            is_checkbox: true,
            /*icon_val: {
                open: "&#xe619;",
                close: "&#xe61a;"
            },
            space: 4,*/
            cols: [
                {
                    field: 'title',
                    title: '标题',
                    width: '30%',
                },
                {
                    field: 'id',
                    title: 'ID',
                    width: '20%'
                },
                {
                    title: '状态',
                    width: '20%',
                    template: function (item) {
                        return '<input type="checkbox" lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
                    }
                },
                {
                    field: 'pid',
                    title: '父ID',
                    width: '20%',
                },
                {
                    field: 'actions',
                    title: '操作',
                    width: '30%',
                    template: function (item) {
                        var tem = [];
                        if (item.pid == 0) {
                            tem.push('<a class="add-child" lay-filter="add">添加子级</a>');
                        }
                        tem.push('<a lay-filter="edit">编辑</a>');
                        if (item.pid > 0) {
                            tem.push('<a class="set-attr">设置属性</a>');
                        }
                        return tem.join(' <font>|</font> ')
                    },
                },
            ]
        });

        treetable.on('treetable(add)', function (data) {
            layer.msg('添加操作');
            console.dir(data);
        })

        treetable.on('treetable(edit)', function (data) {
            layer.msg('编辑操作');
            console.dir(data);
        })

        o('.up-all').click(function () {
            treetable.all('up');
        })

        o('.down-all').click(function () {
            treetable.all('down');
        })

        o('.get-checked').click(function () {
            console.dir(treetable.all('checked'));
        })

        form.on('switch(status)', function (data) {
            layer.msg('监听状态操作');
            console.dir(data);
        })
    })
</script>

